/*
 * @Descripttion:
 * @version:
 * @Author: cx
 * @Date: 2021-01-04 16:56:13
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-04-08 19:13:29
 */
import React, { CSSProperties } from "react";
import Loadable from "react-loadable";

const loadingCSS: CSSProperties = {
  position: "fixed",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  background: "rgba(0, 0, 0, 0.75)",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  zIndex: 9999,
  fontSize: 20
};
interface LoadableInterface {
  loader: any;
  timeout?: number;
  delay?: number;
}

const MyLoadingComponent = (props: any) => {
  if (props.error) {
    // When the loader has errored
    return (
      <div style={{ ...loadingCSS }}>
        <div>
          <p
            style={{
              fontSize: 60,
              color: "#fff",
              marginBottom: 18
            }}
          >
            加载失败!
          </p>
          <button
            onClick={props.retry}
            style={{ display: "block", margin: "0 auto" }}
          >
            重新加载
          </button>
        </div>
      </div>
    );
  } else if (props.timedOut) {
    return (
      <div style={{ ...loadingCSS }}>
        <div>
          <p
            style={{
              fontSize: 60,
              color: "#fff",
              marginBottom: 18
            }}
          >
            加载时间过长，请稍等...
          </p>
          <button
            onClick={props.retry}
            style={{ display: "block", margin: "0 auto" }}
          >
            重新加载
          </button>
        </div>
      </div>
    );
  } else if (props.pastDelay) {
    return (
      <div style={{ ...loadingCSS }}>
        {/* <Spin tip="加载中..." size="large" /> */}
        加载中..
      </div>
    );
  } else {
    return null;
  }
};

export const loadable = (
  loaders: LoadableInterface = {
    loader: null,
    delay: 300,
    timeout: 10000
  }
) => {
  return Loadable({
    loader: loaders.loader,
    loading: MyLoadingComponent
  });
};
export default loadable;
